<template>
  <div class="table-box">
  <!-- 查询表单 -->
    <div class="card table-search" v-show="showSearch">
      <el-form ref="queryForm" :model="queryParams" :inline="false" @keyup.enter="handleQuery()">
        <div class="grid-box">
        		<#list queryList as field>
		  <div class="grid-column" <#if (field_index>=2)>v-show="!searchCollapsed"</#if> >
			<el-form-item label="${field.fieldComment!}" prop="${field.attrName}">
						<#if field.formType == 'select' || field.formType == 'radio'>
							<#if field.formDict??>
			  <dict-select
			    v-model="queryParams.${field.attrName}"
			    dict-type="${field.formDict}"
			    placeholder="${field.fieldComment!}"
			    clearable
			  />
							<#else>
			  <el-select v-model="queryParams.${field.attrName}" placeholder="请选择">
				<el-option label="请选择" value="0"></el-option>
			  </el-select>
							</#if>
						<#elseif field.queryFormType == 'date' || field.formType == 'datetime'>
			  <el-date-picker
				v-model="queryParams.${field.attrName}"
				type="datetimerange"
				value-format="YYYY-MM-DD HH:mm:ss"
			  />
						<#else>
			  <el-input
				v-model="queryParams.${field.attrName}"
				placeholder="${field.fieldComment!}"
				clearable
			  />
						</#if>
			</el-form-item>
		  </div>
				</#list>
		  <div class="grid-operation">
			<el-form-item>
			  <div class="search-operation">
				<el-button type="primary" @click="handleQuery">
				  <i class="iconfont icon-sousuo pr-5px" style="font-size: 12px"></i>
				  {{ $t('button.search') }}
				</el-button>
				<el-button @click="resetQuery">
				  <i class="iconfont icon-zhongzhi pr-5px" style="font-size: 12px"></i>
				  {{ $t('button.reset') }}
				</el-button>
				<el-button type="primary" link @click="searchCollapsed = !searchCollapsed">
				  {{ searchCollapsed ? $t('button.expand') : $t('button.merge') }}
				  <i
					:class="searchCollapsed ? 'iconfont icon-xiangxia' : 'iconfont icon-xiangshang'"
				  ></i>
				</el-button>
			  </div>
			</el-form-item>
		  </div>
		</div>
	  </el-form>
	</div>

	<!-- 表格 -->
	<div class="card table-main">
	  <!-- 表格头部 操作按钮 -->
	  <div class="table-header">
		<div class="header-button-lf">
		  <el-button type="primary" v-hasPerm="['${moduleSimple}:${functionName}:add']" @click="handleAdd">
			<i class="iconfont icon-xinzeng pr-5px"></i>{{ $t('button.add') }}
		  </el-button>
		  <el-button type="danger" v-hasPerm="['${moduleSimple}:${functionName}:delete']" @click="handleDelete()">
			<i class="iconfont icon-shanchu pr-5px"></i>{{ $t('button.delete') }}
		  </el-button>
		</div>
		<div class="header-button-ri">
		  <el-tooltip effect="dark" :content="$t('button.refresh')" placement="top">
			<el-button circle @click="handleQuery">
			  <i class="iconfont icon-shuaxin"></i>
			</el-button>
		  </el-tooltip>
		  <el-tooltip
			effect="dark"
			:content="showSearch ? $t('button.hideSearch') : $t('button.showSearch')"
			placement="top"
		  >
			<el-button circle @click="showSearch = !showSearch">
			  <i class="iconfont icon-sousuo"></i>
			</el-button>
		  </el-tooltip>
		</div>
	  </div>
	  <el-table
		ref="tableRef"
		:data="dataList"
		:border="true"
		row-key="id"
		@selection-change="handleSelectionChange"
	  >
		<el-table-column type="selection" header-align="center" align="center" width="50" />
			<#list gridList as field>
				<#if field.formDict??>
		<el-table-column
		  prop="${field.attrName}"
		  label="${field.fieldComment!}"
		  header-align="center"
		  align="center"
		>
		  <template #default="scope">
			<dict-tag dict-type="${field.formDict}" :value="scope.row.${field.attrName}" />
		  </template>
		</el-table-column>
				<#else>
		<el-table-column
		  prop="${field.attrName}"
		  label="${field.fieldComment!}"
		  header-align="center"
		  align="center"
		/>
				</#if>
			</#list>

		<el-table-column :label="$t('label.operate')" align="center" class-name="operation">
		  <template #default="scope">
			<el-button
			  size="small"
			  link
			  type="primary"
			  @click="handleEdit(scope.row.id)"
			  v-hasPerm="['${moduleSimple}:${functionName}:edit']"
			>
			  <i class="iconfont icon-bianji"></i>{{ $t('button.edit') }}
			</el-button>
			<el-button
			  size="small"
			  link
			  type="primary"
			  @click="handleDelete(scope.row.id)"
			  v-hasPerm="['${moduleSimple}:${functionName}:delete']"
			>
			  <i class="iconfont icon-shanchu"></i>{{ $t('button.delete') }}
			</el-button>
		  </template>
		</el-table-column>
	  </el-table>

	  <el-pagination
		:background="true"
		v-model:current-page="queryParams.pageNum"
		v-model:page-size="queryParams.pageSize"
		:page-sizes="[10, 25, 50, 100]"
		:total="total"
		layout="total, sizes, prev, pager, next, jumper"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
	  />
	</div>
	<!-- 新增/编辑 -->
	<add-or-edit ref="addOrEditRef" @refresh="handleQuery" />
  </div>
</template>
<script setup lang="ts">
  import { ${functionName}PageApi, ${functionName}DeleteApi } from '@/api/${moduleSimple}/${functionName}';
  import { ResultEnum } from '@/enums/httpEnum';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import { ref, reactive, onMounted } from 'vue';
  import AddOrEdit from './add-or-edit.vue';
  import DictSelect from '@/components/dict/dict-select.vue';
  import DictTag from '@/components/dict/dict-tag.vue';
  import { useI18n } from 'vue-i18n';

  const { t } = useI18n();

  /** 注册组件 */
  const queryForm = ref();
  const addOrEditRef = ref();
  /** 是否显示查询 */
  const showSearch = ref(true);
  /** 默认折叠搜索项 */
  const searchCollapsed = ref(true);
  /** 查询条件 */
  const queryParams = reactive<${FunctionName}.${FunctionName}Params>({
	<#list queryList as field>
	${field.attrName}: null,
	</#list>
	pageNum: 1,
	pageSize: 10,
  });
  /** 数据列表 */
  const dataList = ref<${FunctionName}.${FunctionName}Info[]>();
  /** 总数 */
  const total = ref<number>(0);
  /** 已选择列表 */
  const selectedList = ref<${FunctionName}.${FunctionName}Info[]>();
  const loading = ref(true);

  onMounted(() => {
	handleQuery();
  });

  /**
   * @description: 重置查询
   * @return {*}
   */
  const resetQuery = () => {
	queryForm.value.resetFields();
	queryParams.pageNum = 1;
	handleQuery();
  };

  /**
   * @description: 查询
   * @return {*}
   */
  const handleQuery = () => {
	loading.value = true;
	${functionName}PageApi(queryParams).then(({ data }) => {
	  dataList.value = data.list;
	  total.value = data.total;
	  loading.value = false;
	});
  };

  /**
   * @description: 选择列
   * @param {*} val
   * @return {*}
   */
  const handleSelectionChange = (val: ${FunctionName}.${FunctionName}Info[]) => {
	selectedList.value = val;
  };

  /**
   * @description: 更改每页大小
   * @param {*} val
   * @return {*}
   */
  const handleSizeChange = (val: number) => {
	queryParams.pageNum = 1;
	queryParams.pageSize = val;
	handleQuery();
  };

  /**
   * @description: 更改页码
   * @param {*} val
   * @return {*}
   */
  const handleCurrentChange = (val: number) => {
	queryParams.pageNum = val;
	handleQuery();
  };

  /**
   * @description: 新增
   * @return {*}
   */
  const handleAdd = () => {
	addOrEditRef.value.init();
  };

  /**
   * @description: 修改
   * @param {string} key
   * @return {*}
   */
  const handleEdit = (key: string) => {
	addOrEditRef.value.init(key);
  };

  /**
   * @description: 删除
   * @param {string} key
   * @return {*}
   */
  const handleDelete = (key?: string) => {
	let val: any = [];
	if (key) {
	  val.push(key);
	} else {
	  val = selectedList.value?.map((item) => item.id);
	  if (!val || val.length == 0) {
		ElMessage.warning(t('delete.empty'));
		return;
	  }
	}
	ElMessageBox.confirm(t('delete.confirm'), t('common.tips'), {
	  confirmButtonText: t('button.confirm'),
	  cancelButtonText: t('button.cancel'),
	  type: 'warning',
	  lockScroll: false,
	})
	  .then(() => {
		${functionName}DeleteApi(val).then((res) => {
		  if (res.code == ResultEnum.SUCCESS) {
			ElMessage.success(t('delete.success'));
			handleQuery();
		  }
		});
	  })
	  .catch(() => {});
  };
</script>
<style lang="scss" scoped></style>
